<template>
  <div class="da">
    <div class="box">
      <div class="header">OPPOA3
        <h4>登录</h4>
      </div>
      <div class="moddle">
        <img src="./assets/屏幕截图 2024-09-12 082123.png" alt="">
      </div>
    </div>
    <div class="footer">
      <van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">首页</van-tabbar-item>
  <van-tabbar-item icon="apps-o">分类</van-tabbar-item>
  <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
  <van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>
    </div>
  </div>
</template>

<style lang="scss">
  *{
    padding: 0;
    margin: 0;
    list-style: none;
  }
  html,
  body,
  #app,
  .da{
    width: 100%;
    height: 100%;
  }
  .da{
    flex-direction: column;
    overflow: auto;
    display: flex;
    flex: 1;
  }
  .box{
    flex: 1;
    overflow: auto;
    flex-direction: column;
    // height: 3.125rem;
  }
  .header{
    height: 50px;
    flex-direction: column;
    display: flex;
    overflow: auto;
  }
  .header h4{
    width: 40px;
    height: 30px;
    margin-left: 600px;
  }
  .moddle{
    overflow: auto;
    display: flex;
  }
  .footer{
    height: 50px;
    flex: 1;
  }
</style>
